<template>
  <el-card>
    <div v-for="item in diffs" :key="item.type + item.key" class="modify-desc">
      <div> <span class="label">变更类型：</span><span class="value">{{ type(item.type) }}</span></div>
      <div><span class="label">变更字段：</span><span class="value">{{ item.key }}</span></div>
      <div v-if="item.type === 'update'"><span class="label">变更前：</span><span style="color:#F56C6C">{{ item.oldValue }}</span></div>
      <div v-if="item.type === 'update'"><span class="label">变更后：</span><span style="color:#67C23A">{{ item.value }}</span></div>
      <div v-if="item.operator"><span class="label">变更人：</span><span>{{ item.operatorName }}（{{ item.operator }}）</span></div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'ModifyDesc',
  props: {
    diffs: {
      required: true,
      type: Array,
      default: function() {
        return []
      }
    }
  },
  methods: {
    type(type) {
      return type === 'update' ? '更新' : (type === 'add' ? '增加' : (type === 'remove' ? '删除' : type))
    }
  }
}
</script>

<style lang="scss">
.modify-desc {
  margin: 10px 0;
  div {
    display: inline-block;
    margin-right: 10px;

    .label {
      color: #606266;
    }
  }
}
</style>
